<template>
  <div>
    <tops> <slot>人气推荐</slot> </tops>

    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.pic" alt="" />
        <p>{{ item.name }}</p>
        <p>
          <b>{{ item.characteristic }}</b>
        </p>
        <p>
          <span>￥{{ item.minPrice }} </span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import tops from "@/components/Top";
export default {
  components: {
    tops,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$http("https://api.it120.cc/small4/shop/goods/list", "get").then(
      (res) => {
        console.log(res);
        this.list = res.data.data;
      }
    );
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
ul {
  font-size: 0.28rem;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-evenly;
  li {
    // line-height: 0.39rem;
    width: 45%;
    // height: 5.56rem; //227.94
    img {
      width: 100%;
      height: 4.33rem; //216.34
    }
    p {
      width: 90%;
      font-size: 0.28rem; //14px
      //超出文字变成...
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      b {
        font-size: 0.24rem; //12
        color: #b2b2b2;
        font-weight: 400;
      }
    }

    span {
      font-size: 0.24rem; //12
      color: #d00000;
    }
  }
}
</style>
